<!--
@function: 表格模板列-多项单选，包括单排和多排的排列
@author:HYS
@description:
设置：
numberOfColumns，表示单选的列数，默认为1
radios，单选的配置数组，每一个包括了id和value
border，是否显示方形的边框
fontFactor，一个宽度控制因子，字母和汉字宽度不同需要协调
行为：
选中改变之后，会触发value-change事件，传出参数为radio的id
-->
<template>
  <div  class="radio-group-column">
    <!-- :style="'width:'+(numberOfColumns*radioWidth)+'px;'" -->
    <el-radio-group style="width:100%;" v-model="selected" @change="onChange" >
      <template v-for="radio in radios">
        <el-radio :key="radio.id" :style="'width:'+radioWidth+'%'"
         class="radio-item" :border="border"
        :label="radio.id">
        <!-- :style="'width:'+radioWidth+'px;margin-left:0;'" -->
          {{radio.value}}</el-radio>
      </template>
    </el-radio-group>
  </div>
</template>
<script>

// 计算选项中最长的字符，用来统一radio的宽度
var calcuMaxLength = function(radios) {
  var max = 0;
  radios.forEach((radio)=>{
    radio.value.length > max?(max = radio.value.length):(max);
  });

  return max;
}

export default {
  name:"RadioGroupColumn",
  props:{
    numberOfColumns: {// 列数-这里使用style的宽度来控制显示多少列
      type:Number,
      default:1
    },
    radios:{// 单选选项的配置
      type:Array,
      default:()=>{
        return [];
      }
    },
    border:{// 是否显示选项的边框
      type:Boolean,
      default:true
    },
    fontFactor:{// 控制宽度的因子，因为汉字和字母数字宽度不同，所以需要灵活变动
      type:Number,
      default:16
    },
    selectedOuter:{// 用于从外部传入回显值
      type:[Number,String],// 添加了字符串,周烨 2018-7-3
      default:-1
    }
  },
  computed:{
    radioWidth:function() {// 宽度
      // var maxLength = calcuMaxLength(this.radios);

      return 100/this.numberOfColumns;

      // return (maxLength+1) * this.fontFactor;
    }
  },
  watch:{
    "selectedOuter":{
      immediate:true,
      handler:function(){
        // console.log("enter1");
        // console.log("value=",this.selectedOuter);
        if(this.selectedOuter !== -999){
          // console.log("enter2");
          this.selected = this.selectedOuter;
        }
      }
    }
  },
  methods:{
    onChange:function (value) {
      this.$emit('value-change', value);
    },
    setSelected:function(v){
      this.selected = v;
    }
  },
  data(){
    return {
      selected:-999// 当前选中的radio的id
    };
  }
}
</script>
<style lang="scss">

.radio-group-column{
  display: flex;
  width:100%;
  margin:0;
  padding:0;
  .el-radio.is-bordered + .el-radio.is-bordered {
     margin:0;
  }
  .radio-item {
   white-space:normal;
   padding:12px 5px;
   height:auto;// 自动调整高度，以适应换行
   border-radius: 0px;
   float:left;
   text-align: left;
  }
}

</style>
